<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { RouterLink } from 'vue-router';
const router = useRouter();
// 模拟数据
const list = ref([
  {
    id: 1,
    name: '分类1',
    open: false,
    subCateGroupList: [
      {
        id: 101,
        name: '物品1',
        categoryList: [
          { id: 1001, bannerUrl: '' },
          // 更多分类
        ],
      },
      // 更多子分类组
    ],
  },
  // 更多分类
]);

// 显示弹出层
function show(item) {
  item.open = true;
}

// 隐藏弹出层
function hide(item) {
  item.open = false;
}

// 导航并隐藏弹出层
</script>

<template>
  <ul class="app-header-nav">
    <li class="item">
      <RouterLink class="link" to="/home">首页</RouterLink>
    </li>
    <li
        class="item"
        v-for="item in list"
        :key="item.id"
        @mouseenter="show(item)"
        @mouseleave="hide(item)"
    >
      <RouterLink class="link" :to="'/category/'+item.id" @click="hide(item)">{{item.name}}</RouterLink>
      <!-- 弹出层 -->
      <div class="layer" :class="{active:item.open}">
        <ul>
          <li v-for="ele in item.subCateGroupList" :key="ele.id">
            <a href="#">
              <img :src="ele.categoryList[0].bannerUrl" alt />
            </a>
            <div>{{ele.name}}</div>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</template>

<style scoped>
.app-header-nav {
  position: relative;
  clear: both;
  z-index: 999;
}

.app-header-nav .item {
  float: left;
  padding: 0 10px;
  font-weight: bold;
  height: 40px;
  line-height: 40px;
}


  .router-link-exact-active a {
    color: #27ba9b;
    border-bottom: 2px solid #27ba9b;
  }


  .app-header-nav .item .link {
    padding-bottom: 7px;
    font-size: 15px;
  }

  .app-header-nav .item:hover .link {
    color: #27ba9b;
    border-bottom: 2px solid #27ba9b;
  }

  .app-header-nav .item:hover .layer {
    opacity: 1;
    height: 120px;
  }

  .app-header-nav .layer {
    position: absolute;
    left: 0;
    top: 42px;
    opacity: 0;
    background-color: white;
    box-shadow: 0 0 5px #cccccc;
    width: 1100px;
    height: 0px;
    overflow: hidden;
    transition: all 0.5s;
  }

  .app-header-nav .layer ul {
    display: flex;
  }

  .app-header-nav .layer ul li {
    height: 100px;
    width: 100px;
    text-align: center;
  }

  .app-header-nav .layer ul li a {
    border-bottom: 0;
  }

  .app-header-nav .layer ul li img {
    width: 60px;
    height: 60px;
  }

  .app-header-nav .layer ul li:hover {
    background-color: #e1e0e0;
  }

</style>